import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Table, Button, Tabs } from 'antd'
import {
  fetchFlowList,
  updateFlowListQuery,
  resetFlowListQuery } from 'actions/flow'
import Panel from 'components/panel'
import Gform from 'components/gForm'
import TypeList from './flowType/typeList'
import './style.css'


const TabPane = Tabs.TabPane;

//连接公用常量、后端返回的数据方法  并放置在props里面调用
@connect(
  (state, props) => ({
    config: state.config,
    flowListSearchResult: state.flowListSearchResult,
    amList: state.amList,
  })
)

// 声明组件  并对外输出
export default class flowList extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props) {
    super(props)
    this.state = {
      activeTab: 'list',
      list: [
        {
          id: 1,
          name: '张雷',
          sex: '男',
          age: 21,
          cardId: '342425199604036734',
          censusSort: '341523',
          address: '三区79号',
          institutions: '江干分局九堡派出所',
          flowInTime: '20151119',
          recordNum: '330104200800010282'
        },
        {
          id: 2,
          name: '周凤霞',
          sex: '女',
          age: 55,
          cardId: '340823198001145627',
          censusSort: '340823',
          address: '一区72号',
          institutions: '江干分局九堡派出所',
          flowInTime: '20151119',
          recordNum: '330104200800010600'
        }
      ]
    }
    this._handleSubmit = this._handleSubmit.bind(this)
    this.cacheSearch = this.cacheSearch.bind(this)
    this._clear = this._clear.bind(this)
  }

// 组件已经加载到dom中
  componentDidMount() {
    this.props.dispatch(fetchFlowList({currentPage: 1}))
  }

  // 点击搜索按钮的回调事件
  _handleSubmit(query, currentPage) {
    this.props.dispatch(fetchFlowList({...query, currentPage: currentPage}))
  }


  // 重置搜索条件
  _clear() {
    this.props.dispatch(resetFlowListQuery())
  }

  // 缓存更新
  cacheSearch(item) {
    this.props.dispatch(updateFlowListQuery(item))
  }

  gFormConfig() {
    const { config } = this.props
    return [
      {
        sort: 'division',
        label: '管辖单位',
        items: config.DIVISION
      }
    ]
  }

  gFormSubmit(query) {
    console.log(query)
  }

  // 表格展示项的配置
  columns() {
    return [
      {
        title: '序号',
        key: 'index',
        render: (text, recordId, index) => <span>{index + 1}</span>,
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '身份证号码',
        dataIndex: 'cardId',
        key: 'cardId',
      },
      {
        title: '户籍类别',
        dataIndex: 'censusSort',
        key: 'censusSort',
      },
      {
        title: '登记地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '管辖单位',
        dataIndex: 'institutions',
        key: 'institutions',
      },
      {
        title: '流口登记时间',
        dataIndex: 'flowInTime',
        key: 'flowInTime',
      },
      {
        title: '档案号',
        dataIndex: 'recordNum',
        key: 'recordNum',
      },
    ]
  }


  render() {
    const {
      flowListSearchResult,
      } = this.props
    // 暂时用假数据来模拟列表项
    return (
      <Panel>
        <Gform gFormConfig={this.gFormConfig()} gFormSubmit={this.gFormSubmit}/>
        <TypeList
          columns={this.columns()}
          dataSource={this.state.list}
          currentPage={flowListSearchResult.currentPage}
          loading={flowListSearchResult.loading}
        />
      </Panel>
    )
  }
}
